<template>
	<!-- 商品分类导航 -->
	<div class="type-nav">
		<div class="container">
			<div @mouseleave="mouseLeaveList" @mouseenter="mouseEnterList">
				<router-link class="all" tag="h2" to="/search"
					>全部商品分类</router-link
				>

				<transition name="sort">
					<div class="sort" v-show="showSort" @click="goSearch">
						<div class="all-sort-list2">
							<div
								class="item"
								v-for="(item1, i) in categoryList"
								:key="item1.categoryId"
								@mouseenter="mouseEnterH3(i)"
								:class="{ active: curCategoryI == i }"
							>
								<h3>
									<a
										:data-item-name="item1.categoryName"
										:data-item-id1="item1.categoryId"
									>
										{{ item1.categoryName }}
									</a>
								</h3>
								<div
									class="item-list clearfix"
									:style="{ display: curCategoryI == i ? 'block' : 'none' }"
								>
									<div
										class="subitem"
										v-for="item2 in item1.categoryChild"
										:key="item2.categoryId"
									>
										<dl class="fore">
											<dt>
												<a
													:data-item-name="item2.categoryName"
													:data-item-id2="item2.categoryId"
												>
													{{ item2.categoryName }}
												</a>
											</dt>
											<dd>
												<em
													v-for="item3 in item2.categoryChild"
													:key="item3.categoryId"
												>
													<a
														:data-item-name="item3.categoryName"
														:data-item-id3="item3.categoryId"
													>
														{{ item3.categoryName }}
													</a>
												</em>
											</dd>
										</dl>
									</div>
								</div>
							</div>
						</div>
					</div>
				</transition>
			</div>
			<nav class="nav">
				<a href="###">服装城</a>
				<a href="###">美妆馆</a>
				<a href="###">尚品汇超市</a>
				<a href="###">全球购</a>
				<a href="###">闪购</a>
				<a href="###">团购</a>
				<a href="###">有趣</a>
				<a href="###">秒杀</a>
			</nav>
		</div>
	</div>
</template>

<script>
import { mapState } from "vuex";
import throttle from "lodash/throttle";
export default {
	name: "TypeNav",
	data() {
		return {
			curCategoryI: -1,
			showSort: true,
		};
	},
	mounted() {
		if (this.$route.name == "search" || this.$route.name == "detail") {
			// 因为通过params传递了参数，所以路由需要用name进行判断
			this.showSort = false;
		}
	},
	methods: {
		mouseEnterH3: throttle(function (index) {
			this.curCategoryI = index;
		}, 200),

		mouseLeaveList() {
			this.curCategoryI = -1;
			if (this.$route.name == "search" || this.$route.name == "detail") {
				this.showSort = false;
			}
		},

		mouseEnterList() {
			this.showSort = true;
		},

		goSearch(eve) {
			const { itemName, itemId1, itemId2, itemId3 } = eve.target.dataset;

			if (itemName) {
				// console.log("发现a标签");
				const locations = {
					name: "search",
					query: { categoryName: itemName },
				};
				if (itemId1) {
					locations.query.category1Id = itemId1;
				} else if (itemId2) {
					locations.query.category2Id = itemId2;
				} else if (itemId3) {
					locations.query.category3Id = itemId3;
				}

				if (Object.keys(this.$route.params).length !== 0) {
					locations.params = this.$route.params;
				}
				this.$router.push(locations);
			}
		},
	},
	computed: {
		...mapState("home", ["categoryList"]),

		/* // 没开命名空间
    ...mapState({
			categoryList(store) {
				return store.home.categoryList;
			},
		}), */
	},
};
</script>

<style lang="less" scoped>
.type-nav {
	border-bottom: 2px solid #e1251b;

	.container {
		width: 1200px;
		margin: 0 auto;
		display: flex;
		position: relative;

		.all {
			width: 210px;
			height: 45px;
			background-color: #e1251b;
			line-height: 45px;
			text-align: center;
			color: #fff;
			font-size: 14px;
			font-weight: bold;
		}

		.nav {
			a {
				height: 45px;
				margin: 0 22px;
				line-height: 45px;
				font-size: 16px;
				color: #333;
			}
		}

		.sort {
			position: absolute;
			left: 0;
			top: 45px;
			width: 210px;
			height: 461px;
			position: absolute;
			background: #fafafa;
			z-index: 999;

			a {
				cursor: pointer;
			}

			.all-sort-list2 {
				.item {
					&.active {
						background: tomato;
					}

					h3 {
						line-height: 30px;
						font-size: 14px;
						font-weight: 400;
						overflow: hidden;
						padding: 0 20px;
						margin: 0;

						a {
							color: #333;
						}
					}

					.item-list {
						display: none;
						position: absolute;
						width: 734px;
						min-height: 460px;
						background: #f7f7f7;
						left: 210px;
						border: 1px solid #ddd;
						top: 0;
						z-index: 9999 !important;

						.subitem {
							float: left;
							width: 650px;
							padding: 0 4px 0 8px;

							dl {
								border-top: 1px solid #eee;
								padding: 6px 0;
								overflow: hidden;
								zoom: 1;

								&.fore {
									border-top: 0;
								}

								dt {
									float: left;
									width: 54px;
									line-height: 22px;
									text-align: right;
									padding: 3px 6px 0 0;
									font-weight: 700;
								}

								dd {
									float: left;
									width: 415px;
									padding: 3px 0 0;
									overflow: hidden;

									em {
										float: left;
										height: 14px;
										line-height: 14px;
										padding: 0 8px;
										margin-top: 5px;
										border-left: 1px solid #ccc;
									}
								}
							}
						}
					}

					/* 					&:hover {
						.item-list {
							display: block;
						}
					} */
				}
			}
		}

		// 过渡动画开始开始的状态（进入）
		.sort-enter {
			height: 0px;
			opacity: 0;
		}
		// 过渡动画结束状态（进入）
		.sort-enter-to {
			height: 461px;
			opacity: 1;
		}

		// 定义动画样式
		.sort-enter-active {
			overflow: hidden;
			transition: all 0.7s ease;
		}
	}
}
</style>
